<template>
    <view class="container">
        <Gap height="20rpx"></Gap>
        <view class="w-96 flex flex-col bg-white">
            <view class="flex items-center my-3 ">
                <text class="flex ml-2 font-bold text-base w-4/12">头像</text>
                <view class="flex justify-end items-center w-7/12">
                    <!-- #ifndef MP-WEIXIN -->
                    <image :src="userInfo.avatar" mode="aspectFit" class="w-14 h-14 rounded-full "
                        @tap.stop="showModel = true" />
                    <!-- #endif -->

                </view>
                <view class=" w-6 flex justify-center items-center w-1/12">
                    <uiwu-icon style="flex: none;" size="20" type="arrowright" color="#999"></uiwu-icon>
                </view>
            </view>
            <view class=" flex  items-center my-3 " @tap.stop="showModelPopup">
                <text class="flex ml-2 font-bold text-base w-4/12">昵称</text>
                <view class="flex justify-end items-center w-7/12 h-14">
                    <text class="w-full text-right text-sm ">{{ userInfo.nickname }}</text>
                </view>
                <view class=" w-6 flex justify-center items-center w-1/12">
                    <uiwu-icon style="flex: none;" size="20" type="arrowright" color="#999"></uiwu-icon>
                </view>
            </view>

            <view class=" flex  items-center my-3" @tap.stop="uiwu.openWindow('/pages/user/binding')">
                <text class="flex ml-2 font-bold text-base w-4/12">绑定手机号</text>
                <view class="flex justify-end items-center w-7/12 h-14">
                    <text class="w-full text-right text-sm">{{ userInfo.phone }}</text>
                </view>
                <view class=" w-6 flex justify-center items-center w-1/12">
                    <uiwu-icon style="flex: none;" size="20" type="arrowright" color="#999"></uiwu-icon>
                </view>
            </view>
            <view class=" flex  items-center my-3" @tap.stop="uiwu.openWindow('/pages/user/logoff')">
                <text class="flex ml-2 font-bold text-base w-4/12">注销账号</text>
                <view class="flex justify-end items-center w-7/12 h-14">
                    <text class="w-full text-right text-sm ">注销之后无法恢复，请谨慎操作</text>
                </view>
                <view class=" w-6 flex justify-center items-center w-1/12">
                    <uiwu-icon style="flex: none;" size="20" type="arrowright" color="#999"></uiwu-icon>
                </view>
            </view>
            <Gap height="30rpx"></Gap>
            <view class="flex justify-center items-center">
                <view class="btns flex justify-center items-center" @tap="logout">
                    <text class=" text-white font-bold text-base mb-1">退出登录</text>
                </view>
            </view>
            <Gap height="40rpx"></Gap>
        </view>
        <uiwu-popup v-model="showModel">
            <view class="uiwu-coupons" @tap.stop>
                <view class="uiwu-coupons-header uiwu-flex-align">
                    <view class="title">选择默认头像</view>
                    <uiwu-icon type="closeempty" color="#FFF" size="24" @click="showModel = false"></uiwu-icon>
                </view>
                <view class="uiwu-coupons-box">
                    <view class="avatar uiwu-flex-space">
                        <view v-for="(item, index) in avatarList" :key="index" @tap.stop="avatarIndex = index"
                            :class="avatarIndex == index ? 'active' : ''">
                            <image :src="item.url" mode="aspectFill"></image>
                            <image v-if="avatarIndex == index" class="gou" src="/static/dagou.png" mode="widthFix">
                            </image>
                        </view>
                        <!-- <view @tap.stop="avatarIndex = 2" :class="avatarIndex == 2 ? 'active' : ''">
							<image src="/static/nanhai.png" mode="aspectFill"></image>
							<image v-if="avatarIndex == 2" class="gou" src="/static/dagou.png" mode="widthFix"></image>
						</view> -->
                    </view>
                    <uiwu-footer>
                        <view class="uiwu-footer w-90">
                            <view @tap.stop="submitAvatar" class="uiwu-footer-box uiwu-flex-center">确认使用</view>
                        </view>
                    </uiwu-footer>
                </view>
            </view>
        </uiwu-popup>
    </view>
</template>
<script setup lang="ts">
import { isLogin } from '@/api/common';
import { uiwu, getMenulist, systemAvatar, useredit } from '@/api/interface/interface';
import Gap from '@/components/gap.vue';
import { userStore } from '@/store/userStore';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
const avatarIndex = ref<number>(99999999)
const showModel = ref(false);
const avatarList = ref([]);
const userInfo = computed(() => {
    const { userInfo } = userStore();
    console.log(userInfo, "userInfo");
    return userInfo;
})
const { updateUserInfo } = userStore();

onLoad(() => {
    getsystemAvatar();
});
onShow(() => {

    updateUserInfo();
})

const getsystemAvatar = async () => {
    const { data } = await systemAvatar();
    avatarList.value = data
}

const submitAvatar = async (): Promise<any> => {
    if (avatarIndex.value === 99999999) return uiwu.toast('请选择头像');
    const result = await useredit({
        field: 'avatar',
        value: avatarList.value[avatarIndex.value].url
    })
    if (!result) return
    showModel.value = false;
    uiwu.toast('更新头像成功')
    updateUserInfo();
}

const logout = async () => {
    const status = await uiwu.model({
        title: '温馨提示',
        content: '您是否确认退出登录？'
    });
    if (!status) {
        return;
    }
    uni.clearStorageSync()
    uni.reLaunch({
        url: '/pages/login/login'
    })
}

const showModelPopup = (): void => {
    uni.showModal({
        title: '昵称修改',
        editable: true,
        placeholderText: '请输入新的昵称',
        success: async (res) => {

            if (!res.content) {
                return uiwu.toast('名称不能为空');
            }
            let content = res.content.trim();
            if (/^ *$/.test(content)) {
                return uiwu.toast('名称不能全是空格')
            }
            const result = await useredit({
                field: 'nickname',
                value: content
            })

            if (!result) return
            uiwu.toast('修改成功')
            updateUserInfo()
        }
    })
}

</script>
<style lang="scss" scoped>
.container {
    height: 100vh;
    background-color: rgba(247, 248, 249, 1);

    .btns {
        width: 230px;
        height: 60px;
        background-image: url("@/static/image/button.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;

    }

    .uiwu-coupons {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;

        &-header {
            width: 100%;
            height: 100rpx;
            background: #231815;
            border-radius: 32rpx 32rpx 0px 0px;
            padding: 0 20rpx;

            .title {
                font-size: 36rpx;
                font-weight: bold;
                color: #FFFFFF;
                text-align: center;
                width: 100%;
                padding-left: 30rpx;
            }
        }

        &-box {
            background-color: #fff;
            padding: 72rpx 0 245rpx;

            .avatar {
                padding: 0 115rpx;

                image {
                    width: 100%;
                    height: 100%;

                    &.gou {
                        width: 40rpx;
                        position: absolute;
                        top: 0;
                        right: 0;
                    }
                }

                view {
                    width: 160rpx;
                    height: 160rpx;
                    position: relative;
                    border: 3rpx solid transparent;

                    &.active {
                        border: 3rpx solid #231815;
                        border-radius: 50%;
                    }
                }
            }
        }
    }

    .uiwu-footer {

        &-box {
            width: 100%;
            height: 80rpx;
            background: rgba(230, 0, 18, 1);
            border-radius: 40rpx;
            font-size: 32rpx;
            font-weight: bold;
            color: #FFFFFF;
        }
    }
}
</style>